<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
    <view>
        <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
                    <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
                        <swiper-item>
                            <view class="swiper-item uni-bg-red">A</view>
                        </swiper-item>
                        <swiper-item>
                            <view class="swiper-item uni-bg-green">B</view>
                        </swiper-item>
                        <swiper-item>
                            <view class="swiper-item uni-bg-blue">C</view>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
        <view class="swiper-list">
            <view class="uni-list-cell uni-list-cell-pd">
                <view class="uni-list-cell-db">指示点</view>
                <switch :checked="indicatorDots" @change="changeIndicatorDots" />
            </view>
            <view class="uni-list-cell uni-list-cell-pd">
                <view class="uni-list-cell-db">自动播放</view>
                <switch :checked="autoplay" @change="changeAutoplay" />
            </view>
        </view>
        <view class="uni-padding-wrap">
            <view class="uni-common-mt">
                <text>幻灯片切换时长(ms)</text>
                <text class="info">{{duration}}</text>
            </view>
            <slider @change="durationChange" :value="duration" min="500" max="2000" />
            <view class="uni-common-mt">
                <text>自动播放间隔时长(ms)</text>
                <text class="info">{{interval}}</text>
            </view>
            <slider @change="intervalChange" :value="interval" min="2000" max="10000" />
        </view>
    </view>
</template>
<script></script>
<style></style>